<script setup lang="ts">
import { ref }from'vue';
import CustomNavbar from './components/customNavbar.vue'
import { getHomeSwiperApi } from'@/apis/home';
import type { BannerItem } from '@/types/BannerItem';
import { useGuessList } from '@/composables';
import { onLoad } from '@dcloudio/uni-app';

// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {
  const res = await getHomeSwiperApi()
  bannerList.value = res.data
}

// 是否加载中标记
const isLoading = ref(false)

// 页面加载
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getHomeBannerData()])
  isLoading.value = false
})

// 猜你喜欢组件
const { guessRef, onScrolltolower } = useGuessList()
// 下拉刷新状态
const isTriggered = ref(false);
// 下拉刷新触发函数
const onRefresherrefresh = async () => {
  // 开启动画
  isTriggered.value = true
  // 重置猜你喜欢组件数据
  guessRef.value?.refreshData()
  // 加载数据
  await Promise.all([getHomeBannerData(), guessRef.value?.getMore()]) 
  // 关闭动画
  isTriggered.value = false
}

</script>

<template>
  <view class="viewport">
    <CustomNavbar />
    <scroll-view 
      scroll-y
      enable-back-to-top 
      :refresher-triggered="isTriggered" 
      @refresherrefresh="onRefresherrefresh" 
      refresher-enabled 
      class="scroll_css" 
      @scrolltolower="onScrolltolower"
    > 
      <PetSwiper :list="bannerList" />
      <!-- <navigator class="seckill-css" hover-class="none" url="/pagesSeckill/promotion/promotion">
        <view class="icon">
          <image src="@/static/images/seckill.png"></image>
        </view>
        <view style="margin-left: 6px;">
          <view style="font-size: 36rpx;">秒杀专区</view>
          <view style="font-size: 20rpx;margin-top: 3px;">低价抢购心仪商品</view>
        </view>
      </navigator> -->
      <PetGuess ref="guessRef" />
    </scroll-view>
  </view>
  
</template>

<style lang="scss">
page {
  background-color: #f7f7f7;
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll_css{
  flex: 1;
  overflow: hidden;
}

.seckill-css{
  margin-top: 15px;
  height: 150rpx;
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
}
.icon{
  height: 90rpx;
  width: 90rpx;
}
</style>